<template>
	<view>
		<custom-nav-bar title="历史订单" @rightBtn="showFilter = true"  isRight="false"/>
		<!-- 页面内容（需预留导航栏高度） -->
		<view :style="{ marginTop: totalNavHeight + 'px' }">
			<!-- 主体内容 -->
			<view class="container">
				<!-- 页面内容 -->
				<view class="tabs-container">
					<view class="tabs">
						<view class="tab" :class="{ active: activeTab === 0 }" @click="switchTab(0)">代收订单</view>
						<view class="tab" :class="{ active: activeTab === 1 }" @click="switchTab(1)">代付订单</view>
						<view class="indicator" :style="{ left: activeTab * 50 + 20 + '%'}"></view>
					</view>
				</view>
				<!-- 筛选条件显示 -->
				<!-- <view class="filter-preview" v-if="recordList==false">
			    <view class="filter-row">
			      <text>时间范围:</text>
			      <text>{{ filterData.startTime || '未选择' }} 至 {{ filterData.endTime || '未选择' }}</text>
			    </view>
			    <view class="filter-row">
			      <text>订单类型:</text>
			      <text v-if="selectedOrderTypes.length === 0">未选择</text>
			      <text v-else>
			        <text v-for="(type, index) in selectedOrderTypes" :key="index" class="filter-tag">
			          {{ type }}
			        </text>
			      </text>
			    </view>
			    <view class="filter-row">
			      <text>订单状态:</text>
			      <text>
			        <text v-for="status in selectedOrderStatus" :key="status" class="filter-tag">
			          {{ status }}
			        </text>
			      </text>
			    </view>
			  </view>
			   -->
				
				<view v-if="tradeList && tradeList.length>0">
					<scroll-view direction="vertical" scroll-y="true" style="height: 100vh;" @scrolltolower="GetNewData"
						scroll-with-animation="true">
						<view class="trade-records" v-for="(item,index) in tradeList" :key="index">
							<view class="trade-flex trade-top">
								<view>订单状态：{{orderStart(item.status)}}</view>
								<view>金额：<text class="public-red">{{item.order_money}}</text></view>
							</view>
							<view class="trade-number trade-top" @click="copyOrderNumber(item.order_number)">
								<view>交易单号：{{item.order_number}}</view>
								<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
							</view>
							<!-- <view class="trade-flex trade-top">
								<view>帐前余额：<text class="public-red">412.00</text></view>
								<view>帐后余额：<text class="public-red">365.00</text></view>
							</view> -->
							<view class="trade-top">交易时间：{{timeString(item.createtime)}}</view>
						</view>
						<!-- 加载状态提示 -->
						<view v-if="isLoading" class="loading-text">加载中...</view>
						<view v-if="noMoreData" class="no-more-text">没有更多数据了</view>
					</scroll-view>
				</view>
				<EmptyRecord v-else></EmptyRecord>
				<!-- 筛选弹窗组件 -->
				<filter-popup :show="showFilter" :filterData="filterData" @close="showFilter = false"
					@update-order-types="handleOrderTypesUpdate" @update-order-status="handleOrderStatusUpdate"
					@pick-time="handlePickTime" @reset="resetFilter" @confirm="applyFilter" />
			</view>
		</view>
	</view>

</template>

<script src="./index.js"></script>
<style scoped src="./index.scss" lang="scss"></style>